<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" id="favicon" href="imgs/lxn/favicon.ico" type="image/x-icon">
    <title>美食首页</title>
    <link rel="stylesheet" href="plugins/layui/css/layui.css">
    <!-- 引入bootstrap.css - 开发环境/bootstrap.min.css - 生产环境-->
    <link rel="stylesheet" href="plugins/bootstrap-3.4.1-dist/css/bootstrap.css">
    <!-- 引入登录所需要的h+ -->
    <link href="Hplus/css/font-awesome.css" rel="stylesheet">

    <link href="Hplus/css/animate.css" rel="stylesheet">
    <link href="Hplus/css/style.css" rel="stylesheet">
    <link rel="stylesheet" href="css/lxn/index.css">
    <link rel="stylesheet" href="css/lxn/personal.css">
    <link rel="stylesheet" href="css/lxn/order.css">
</head>
<body>
    <!-- 背景变白 -->
    <div class="fknAV" id="outer"></div>
    <!-- 顶部导航栏 -->
    <div class="top-fixed">
        <div id="top" class="container" style="margin-top: 5px;">
            <div class="row toprow">
                <ul class="nav navbar-nav navbar-left col-md-6">
                    
                    <div  class="col-md-4">
                        <a href="index.html"><img src="imgs/lxn/topico.svg" alt=""></a>
                    </div>
                    <div class="col-md-8">
                        <div class="input-group">
                            <input id="search1" type="text" class="form-control" placeholder="">
                            <span class="input-group-btn">
                                <svg t="1648374506062" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3014" width="22" height="22">
                                    <path d="M909.824 837.12l-209.408-208.896a333.824 333.824 0 1 0-72.192 72.192l208.896 209.408a51.2 51.2 0 1 0 72.704-72.704z m-477.696-174.592a230.4 230.4 0 1 1 230.4-230.4 230.4 230.4 0 0 1-230.4 230.4z" fill="" p-id="3015"></path></svg><!-- <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button> -->
                            </span>
                        </div><!-- /input-group -->
                        <form action="#" id="search1form" class="search1form">
                            <a class="btn btn-default" href="#" role="button">
                                <div class="lefticon">
                                    <svg t="1648555895063" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4083" width="20" height="20">
                                        <path d="M599.67 957.12l-2.88-0.09c-21.56-1.08-40.16-16.02-45.97-37.15l-95.93-348.76-350.72-97.78a50.568 50.568 0 0 1-37-46.3 50.613 50.613 0 0 1 32.23-49.73L888.05 70.57c18.69-7.26 39.98-2.8 54.18 11.38 14.23 14.22 18.71 35.5 11.42 54.22L646.89 924.82c-7.51 19.31-26.49 32.3-47.22 32.3zM154.19 422.74l351.32 97.94 96.04 349.16L886.2 138.02 154.19 422.74z" fill="#2c2c2c" p-id="4084"></path></svg>
                                </div>
                                <div class="lefttext">
                                    附近
                                </div>
                            </a>
                            <hr>
                            <div class="searchinfo">浏览记录</div>
                            <a class="btn btn-default" href="#" role="button">
                                <div class="lefticon">
                                    <svg t="1648556523361" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5229" width="20" height="20">
                                        <path d="M730.001059 142.376685C674.219615 92.668563 596.796268 65.290005 512 65.290005S349.780385 92.668563 293.998941 142.376685c-67.034742 59.736523-102.464673 150.544715-102.464673 262.620279 0 244.113787 280.928251 530.164708 292.88763 542.222325 7.29208 7.354502 17.22122 11.488659 27.577079 11.488659 10.355859 0 20.284999-4.13518 27.577079-11.488659 11.95938-12.05864 292.88763-298.108538 292.88763-542.222325C832.465732 292.921399 797.035802 202.113207 730.001059 142.376685zM511.967254 862.912162c-26.241664-29.129434-67.722404-77.68429-109.032252-136.26857C315.459718 602.581018 269.222651 491.358891 269.222651 404.996964c0-243.122203 185.824219-262.018575 242.776326-262.018575 225.270627 0 242.776326 200.551642 242.776326 262.018575C754.776326 575.98529 580.826552 786.352485 511.967254 862.912162zM512.00921 232.834906c-85.246523 0-154.60417 70.452585-154.60417 157.056012s69.357648 157.054989 154.60417 157.054989c85.256756 0 154.618497-70.451562 154.618497-157.054989S597.265966 232.834906 512.00921 232.834906zM512.00921 478.968699c-47.768957 0-86.626963-39.95806-86.626963-89.077781s38.858006-89.078805 86.626963-89.078805c47.77305 0 86.641289 39.959084 86.641289 89.078805S559.78226 478.968699 512.00921 478.968699z" p-id="5230"></path></svg>
                                </div>
                                <div class="lefttext">
                                韩式炸鸡
                                </div>
                            </a>
                            <hr>
                            <a class="btn btn-default" href="#" role="button">
                                <div class="lefticon">
                                    <svg t="1648556523361" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5229" width="20" height="20">
                                        <path d="M730.001059 142.376685C674.219615 92.668563 596.796268 65.290005 512 65.290005S349.780385 92.668563 293.998941 142.376685c-67.034742 59.736523-102.464673 150.544715-102.464673 262.620279 0 244.113787 280.928251 530.164708 292.88763 542.222325 7.29208 7.354502 17.22122 11.488659 27.577079 11.488659 10.355859 0 20.284999-4.13518 27.577079-11.488659 11.95938-12.05864 292.88763-298.108538 292.88763-542.222325C832.465732 292.921399 797.035802 202.113207 730.001059 142.376685zM511.967254 862.912162c-26.241664-29.129434-67.722404-77.68429-109.032252-136.26857C315.459718 602.581018 269.222651 491.358891 269.222651 404.996964c0-243.122203 185.824219-262.018575 242.776326-262.018575 225.270627 0 242.776326 200.551642 242.776326 262.018575C754.776326 575.98529 580.826552 786.352485 511.967254 862.912162zM512.00921 232.834906c-85.246523 0-154.60417 70.452585-154.60417 157.056012s69.357648 157.054989 154.60417 157.054989c85.256756 0 154.618497-70.451562 154.618497-157.054989S597.265966 232.834906 512.00921 232.834906zM512.00921 478.968699c-47.768957 0-86.626963-39.95806-86.626963-89.077781s38.858006-89.078805 86.626963-89.078805c47.77305 0 86.641289 39.959084 86.641289 89.078805S559.78226 478.968699 512.00921 478.968699z" p-id="5230"></path></svg>
                                </div>
                                <div class="lefttext">
                                韩式炸鸡
                                </div>
                            </a>
                            <hr>
                            <a class="btn btn-default" href="#" role="button">
                                <div class="lefticon">
                                    <svg t="1648556523361" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5229" width="20" height="20">
                                        <path d="M730.001059 142.376685C674.219615 92.668563 596.796268 65.290005 512 65.290005S349.780385 92.668563 293.998941 142.376685c-67.034742 59.736523-102.464673 150.544715-102.464673 262.620279 0 244.113787 280.928251 530.164708 292.88763 542.222325 7.29208 7.354502 17.22122 11.488659 27.577079 11.488659 10.355859 0 20.284999-4.13518 27.577079-11.488659 11.95938-12.05864 292.88763-298.108538 292.88763-542.222325C832.465732 292.921399 797.035802 202.113207 730.001059 142.376685zM511.967254 862.912162c-26.241664-29.129434-67.722404-77.68429-109.032252-136.26857C315.459718 602.581018 269.222651 491.358891 269.222651 404.996964c0-243.122203 185.824219-262.018575 242.776326-262.018575 225.270627 0 242.776326 200.551642 242.776326 262.018575C754.776326 575.98529 580.826552 786.352485 511.967254 862.912162zM512.00921 232.834906c-85.246523 0-154.60417 70.452585-154.60417 157.056012s69.357648 157.054989 154.60417 157.054989c85.256756 0 154.618497-70.451562 154.618497-157.054989S597.265966 232.834906 512.00921 232.834906zM512.00921 478.968699c-47.768957 0-86.626963-39.95806-86.626963-89.077781s38.858006-89.078805 86.626963-89.078805c47.77305 0 86.641289 39.959084 86.641289 89.078805S559.78226 478.968699 512.00921 478.968699z" p-id="5230"></path></svg>
                                </div>
                                <div class="lefttext">
                                韩式炸鸡
                                </div>
                            </a>
                            <hr>
                        </form>
                    </div><!-- /.col-md-6 -->
                    
                </ul>
                
                <ul class="nav navbar-nav navbar-right">
                    
                    <li><a href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <span class="glyphicon glyphicon-user"></span>个人中心 <span class="caret"></span>
                    </a>
                        <ul class="dropdown-menu">
                          <li><a href="personal-center.html?page=0"><span class="glyphicon glyphicon-envelope"></span>我的首页</a></li>
                          <li><a href="personal-center.html?page=1"><span class="glyphicon glyphicon-pencil"></span> 我的点评</a></li>
                          <li><a href="personal-center.html?page=2"><span class="glyphicon glyphicon-star"></span>我的收藏</a></li>
                          <li><a href="orderl.html"><span class="glyphicon glyphicon-list-alt"></span>我的订单</a></li>
                        </ul>
                     </li>
                     <li>&nbsp;</li>
                    <li class="headportrait"><img src="imgs/lxn/recommend1.jpg" alt=""></li>
                
            </div>
        </div>
    </div>

    <div class="container-fluid myorder">
        <div class="ordercontainer">
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
                <legend>我的订单</legend>
              </fieldset>
               
              <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                <ul class="layui-tab-title">
                  <li class="layui-this">待付款</li>
                  <li>待使用</li>
                  <li>已使用</li>
                  <li>已过期</li>
                </ul>
                <div class="layui-tab-content" >
                  <div class="layui-tab-item layui-show">
                    <!-- 待付款 -->
                    <table class="table table-condensed ordertab" id="content">
                        <thead>
                            <tr>
                                <th>
                                    <input type="checkbox" onclick="select_all(this)">&nbsp;全选
                                </th>
                                <th>订单图片</th>
                                <th>订单信息</th>
                                <th>下单时间</th>
                                <th>数量</th>
                                <th>金额</th>
                                <th>状态</th>
                                
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>
                                    <input type='checkbox' name='ck'>
                                </td>
                                <td><img src="imgs/lxn/recommend2.jpg" alt=""></td>
                                <td>
                                    <p>牛排套餐</p>
                                    <p>订单号：123465</p>
                                    <p>有效期至:2022-05-10</p>
                                </td>
                                <td>2022-04-09 22:57:30</td>
                                <td>1</td>
                                <td>150元</td>
                                <td>
                                    <a href="pay.html"> <button type="button" class="btn btn-outline btn-primary">支付</button></a><br>
                                    <button type="button" class="btn btn-outline btn-danger">取消订单</button>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <input type='checkbox' name='ck'>
                                </td>
                                <td><img src="imgs/lxn/recommend2.jpg" alt=""></td>
                                <td>
                                    <p>牛排套餐</p>
                                    <p>订单号：123465</p>
                                    <p>有效期至:2022-05-10</p>
                                </td>
                                <td>2022-04-09 22:57:30</td>
                                <td>1</td>
                                <td>150元</td>
                                <td>
                                    <a href="pay.html"> <button type="button" class="btn btn-outline btn-primary">支付</button></a><br>
                                    <button type="button" class="btn btn-outline btn-danger">取消订单</button>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <input type='checkbox' name='ck'>
                                </td>
                                <td><img src="imgs/lxn/recommend2.jpg" alt=""></td>
                                <td>
                                    <p>牛排套餐</p>
                                    <p>订单号：123465</p>
                                    <p>有效期至:2022-05-10</p>
                                </td>
                                <td>2022-04-09 22:57:30</td>
                                <td>1</td>
                                <td>150元</td>
                                <td>
                                    <a href="pay.html"> <button type="button" class="btn btn-outline btn-primary">支付</button></a><br>
                                    <button type="button" class="btn btn-outline btn-danger">取消订单</button>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <input type='checkbox' name='ck'>
                                </td>
                                <td><img src="imgs/lxn/recommend2.jpg" alt=""></td>
                                <td>
                                    <p>牛排套餐</p>
                                    <p>订单号：123465</p>
                                    <p>有效期至:2022-05-10</p>
                                </td>
                                <td>2022-04-09 22:57:30</td>
                                <td>1</td>
                                <td>150元</td>
                                <td>
                                    <a href="pay.html"> <button type="button" class="btn btn-outline btn-primary">支付</button></a><br>
                                    <button type="button" class="btn btn-outline btn-danger">取消订单</button>
                                </td>
                            </tr>
                           
                            <!-- 结算 -->
                            <tr>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td class="money">总金额:</td>
                                <td class="moneynum">300</td>
                                <td><a href="pay.html"> <button type="button" class="btn btn-outline btn-primary">一键支付</button></a></td>
                            </tr>
                            
                        </tbody>
                        
                    </table>
                  </div>
                  <!-- 待付款 -->
                  <div class="layui-tab-item">
                    <table class="table table-condensed ordertab" id="content">
                        <thead>
                            <tr>
                                <th>订单图片</th>
                                <th>订单信息</th>
                                <th>下单时间</th>
                                <th>数量</th>
                                <th>金额</th>
                                <th>状态</th>
                                
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><img src="imgs/lxn/recommend2.jpg" alt=""></td>
                                <td>
                                    <p>牛排套餐</p>
                                    <p>订单号：123465</p>
                                    <p>有效期至:2022-05-10</p>
                                </td>
                                <td>2022-04-09 22:57:30</td>
                                <td>1</td>
                                <td>150元</td>
                                <td>
                                    <button type="button" class="btn btn-outline btn-warning">撤销订单</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                  </div>
                  <!-- 已使用 -->
                  <div class="layui-tab-item">
                    <table class="table table-condensed ordertab" id="content">
                        <thead>
                            <tr>
                                <th>订单图片</th>
                                <th>订单信息</th>
                                <th>下单时间</th>
                                <th>数量</th>
                                <th>金额</th>
                                <th>状态</th>
                                
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><img src="imgs/lxn/recommend2.jpg" alt=""></td>
                                <td>
                                    <p>牛排套餐</p>
                                    <p>订单号：123465</p>
                                    <p>有效期至:2022-05-10</p>
                                </td>
                                <td>2022-04-09 22:57:30</td>
                                <td>1</td>
                                <td>150元</td>
                                <td>
                                    <button type="button" class="btn btn-outline btn-success">评价一下</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                  </div>
                  <!-- 已过期 -->
                  <div class="layui-tab-item">
                    <table class="table table-condensed ordertab" id="content">
                        <thead>
                            <tr>
                                <th>订单图片</th>
                                <th>订单信息</th>
                                <th>下单时间</th>
                                <th>数量</th>
                                <th>金额</th>
                                <th>状态</th>
                                
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><img src="imgs/lxn/recommend2.jpg" alt=""></td>
                                <td>
                                    <p>牛排套餐</p>
                                    <p>订单号：123465</p>
                                    <p>有效期至:2022-05-10</p>
                                </td>
                                <td>2022-04-09 22:57:30</td>
                                <td>1</td>
                                <td>150元</td>
                                <td>
                                    <button type="button" class="btn btn-outline btn-danger">重新购买</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                  </div>
                </div>
              </div> 
        </div>
    </div>

    <!-- 底部导航 -->
    <div class="bottom">
        <div class="bottominner">
            <div class="btmlogo">
                <img src="css/lxn/bottomicon.svg" alt="">
            </div>
            <div class="btmc1">
                © 2022 TripAdvisor LLC 保留所有权利。<br>
                <ul>
                    <li><a href="">使用条款</a></li>
                    <li><a href="">隐私和Cookie声明</a></li>
                    <li><a href="">同意使用Cookie</a></li>
                    <li><a href="">网站地图</a></li>
                    <li><a href="">网站工作原理</a></li>
                </ul>
                <div class="btmc1-1">
                    网站的此版本通常面向中文使用者，除非有针对其国家或地区的特定网站版本存在。 您可以使用下拉式菜单访问 Tripadvisor 网站面向特定国家或地区的其他版本。
                    <a href="">更多</a>
                </div>
            </div>
        </div>
        
    </div>

    <script src="plugins/jquery.min.js"></script>
    <script src="js/lxn/index.js"></script>
    <script src="plugins/layui/layui.js"></script>
    <script src="plugins/bootstrap-3.4.1-dist/js/bootstrap.js"></script>
    <script>
        function select_all(obj){
            let cks = document.getElementsByName("ck");
            if(obj.checked){
                cks.forEach((c)=>{
                    c.checked=true;
                })
            }else{
                cks.forEach((c)=>{
                    c.checked=false;       
                })
            }
        }
        $(function(){
            if($("#content > tbody > tr").length>8){
                alert($("#content > tbody > tr").length);
                $(".myorder").css("height","auto");
            }
        })
    </script>
</body>
</html>